/*------------------------------------------------------------------

[Description]

Project:	UWA Internet Technologies
Version:	1.0
Author:		Group I
Author URI: http://undergraduate.csse.uwa.edu.au/units/CITS4230/

-------------------------------------------------------------------*/

// [Color codes]
@lightGreen: #8dc63f;
@darkGreen: #709043;

@lightBlue: #008ec4;
@darkBlue: #1d5771;

@lightGrey: #989897;
@mediumGrey: #90908f;
@darkGrey: #7b7b7a;
@nearBlack: #1c1c1c;

@links: @lightBlue;
@buttonsTop: #ccc;
@buttonsBottom: #555;
@footerBG: #2a2a2a;


/* DEFAULTS */

* {
	outline:none;
	margin:0;
	padding:0;
}
body {
	margin: 0;
	padding: 0;
	background:#e0e0e0 url(../img/bg.jpg) 0 0 repeat-x;
	font-size: 0.8em;
}

h1, h2, h3, h4, h5 {
	font-family: Comfortaa, Sans-serif;
	letter-spacing:.15em;
}
h1 {
	font-size:1.8em;
	color:#1a1a1a;
}
h2 {
	font-size:1.6em;
	text-transform:uppercase;
	color:#1f1f1f;
}
h3 {
	font-size:1.4em
	color:#2a2a2a;
}
h4 {
	font-size:1.2em;
	color:#2f2f2f;
}
h5 {
	font-size:1em;
	color:#3a3a3a;
}
h6 {
	font-size:.8em;
	color:#3f3f3f;
}

p {
	font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
	letter-spacing:.04em;
	line-height:1.5em;
	text-align:justify;
	
	strong, em, b, i {
		font-family: "Lucida Sans", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
	}
}

a, a:link, a:hover, a:visited { color: @links; text-decoration:none; }

.inline li {
	width:auto;
	display: inline;
	list-style:none;
}

hr { border-top:1px dotted @lightGrey; }
.l-vr { border-left:1px dotted @lightGrey; }
.r-vr { border-left:1px dotted @lightGrey; }

.whitespace, .spacer {
	display:block;
	width:100%;
	clear:both;
	height:25px;
}

.left {float:left;}
.right {float:right;}
.center { margin:0 auto; }
.c-align { text-align:center; }
.l-align { text-align:left; }
.r-align { text-align:right; }
.justify { text-align:justify; }

.hidden, .jsshow {
	display:none;
}
code {
	font: 1.1em 'Courier New', Courier, Fixed;
}
acronym, abbr {
	font-size: 0.9em;
	letter-spacing: .07em;
	font-style:italic;
	text-decoration:underline;
	letter-spacing:.2em;
}
q, blockquote {
	font-style:italic;
	color:#333;
	margin-left:5px;
	padding-left:5px;
	border-left:1px dotted #333;
}

	/*colors*/
.green { color:@darkGreen;}
.green.light { color:@lightGreen;}
.blue { color:@darkBlue;}
.blue.light { color:@lightBlue;}
.grey { color:@mediumGrey; }


	/*mixins*/
.rounded-corners-individual (@tl: 5px, @tr: 5px, @br: 5px, @bl: 5px) {
	-moz-border-radius: @tl @tr @br @bl;
	-webkit-border-radius: @tl @tr @br @bl;
	-o-border-radius: @tl @tr @br @bl;
	border-radius: @tl @tr @br @bl;
}
.rounded-corners (@radius: 5px) {
	-moz-border-radius: @radius;
	-webkit-border-radius: @radius;
	-o-border-radius: @radius;
	border-radius: @radius;
}
.box-shadow (@x: 1px, @y: 1px, @spread: 1px, @transparency: 0.2) {
	-webkit-box-shadow: @x @y @spread rgba(0,0,0,@transparency);
	-moz-box-shadow: @x @y @spread rgba(0,0,0,@transparency);
	box-shadow: @x @y @spread rgba(0,0,0,@transparency);
}
.text-shadow (@x: 1px, @y: 1px, @spread: 1px, @color: #000) {
	text-shadow: @x @y @spread @color;
}
.gradient (@top, @middle, @bottom) {
	background: @middle;
	background: -webkit-gradient(linear, left top, left bottom, from(@top), to(@bottom));
	background: -moz-linear-gradient(top, @top, @bottom);
	background: linear-gradient(top, @top, @bottom);
}
.inset() {
	text-shadow: 0 -1px rgba(0,0,0,0.3), -1px 0 rgba(0,0,0,0.3), -1px -1px rgba(0,0,0,0.5), 0 1px rgba(255,255,255,0.1), 1px 0 rgba(255,255,255,0.1), 1px 1px rgba(255,255,255,0.2);
}
.vertical-gradient (@top: @lightGrey, @middle: @mediumGrey, @bottom: @darkGrey) {
	background: @middle;
	background: -webkit-gradient(linear, left top, left bottom, from(@top), to(@bottom));
	background: -moz-linear-gradient(top,  @top,  @bottom);
}

/* errors */
ul.messages {
	list-style:none;
	color:#fff;
	padding:0;
	margin:0 0 10px;
	
	li {
		font-size:1.1em;
		font-weight:bold;
		padding:5px;
		margin:0;
	}
	
	li.error {
		.vertical-gradient(#880000, #880000, #550000);
	}
	li.warning {
		.vertical-gradient(#bbbb00, #bbbb00, #555500);
	}
}

/* HEADER */
header {
	padding: 25px 0;
	clear:both;
	
	h1 {
		display:inline-block;
		color:@lightBlue;
		font-size:4.5em;
		line-height:130px;
		text-indent:-1000px;
		letter-spacing:-.2em;
		text-transform:uppercase;
		font-weight:normal;
		vertical-align:middle;
		width:260px;
		height:100px;
		margin:0;

		background-image:url(../img/logo.gif);
		
		em {
			color:@lightGreen;
			margin-left:.2em;
			letter-spacing:0em;
		}
	}
	
	h2 {
		display:inline-block;
		width:100%;
		font-family:Comfortaa, Arial;
		font-weight:normal;
		color:@lightGreen;
		margin:0;
		letter-spacing:.4em;
	}
	
	nav {
		position:relative;
		font-size:1.2em;
		margin-top:50px;
		margin-bottom:15px;
		text-align:right;

		a {
			float:left;
			padding:.1em .7em;
		}

		a.active {
			border-bottom:1px dotted @lightBlue;
		}

		.navbox {
			.box-shadow(1px, 1px, 3px, .5);
			.rounded-corners(.3em);
			border:1px solid #fff;
			float:left;
			padding:0;
			overflow:hidden;

			a {
				font-family:Comfortaa;
				font:.8em;
				font-weight:bold;
				display:inline-block;
				vertical-align:middle;
				color:#fff;
			}

			a.login {
				.gradient(@lightGreen, @lightGreen, @darkGreen);
				border-right:1px solid @darkGreen;
			}

			a.signup {
				.gradient(@lightBlue, @lightBlue, @darkBlue);
				border-left:1px solid @lightBlue;
			}
		}

		.connect {
			font-family:"Gloria Hallelujah";
			color:#aaa;
			position:absolute;
			top:-45px;
			right:-150px;
			padding-left:20px;
			padding-bottom:20px;
			background:url(../img/conect-arrow.gif) 0 10px no-repeat;
		}
	}
}

#search {
	padding-top:50px;
	
	input {
		width:150px;
		margin:0;
		float:left;
		height:28px;
		border-right:none;
		.rounded-corners-individual(3px, 0, 0, 3px);
	}
	
	button {
		float:left;
		height:30px;

		display:inline-block;
		font-size:1em;
		font-weight:bold;
		text-align:center;
		margin:0;
		padding:0 5px;

		color:#fff;

		.vertical-gradient(#999, #999, #111);
		.rounded-corners-individual(0, 3px, 3px, 0);

		border:1px solid #999;
	}
}

form {
	fieldset {
		text-align:center;
		margin:50px 100px;

		border:3px solid #fff;
		.vertical-gradient(#666, #333, #111);
		.rounded-corners(5px);
		.box-shadow(2px, 2px, 4px, .4);
		
		legend {
			position:absolute;
			font-size:3.5em;
			letter-spacing:.1em;
			text-transform:uppercase;
			margin-left:25px;
			color:#555;
			.inset();
		}
		
		ol {
			padding:55px 25px 0;
			li {
				margin: 10px 0;
				label {
					font-size:1.2em;
					color:#fff;
					margin-left:-200px;
				}
			}
			
			li.controls {
				margin-top:35px;
				text-align:right;
			}
		}
	}
	
	input, textarea {
		font-size:1.1em;
		border:1px solid #999;
		background:#fff url(../img/input-bg.jpg) 0 0 repeat-x;
		padding:0 5px;
		.rounded-corners(3px);
	}
	
	ol {
		list-style:none;
		
		li {
			margin:5px 0;
			
			label {
				font-size:1.1em;
				display:inline-block;
				width:200px;
				text-align:right;
				margin-right:5px;
			}
			
			input, textarea {
				padding:3px;
			}
		}
	}
	
	button {
		font-size:1.5em;
		display:inline-block;
		vertical-align:middle;
		color:#fff;
		padding:3px 6px;
		margin:0 10px;
		.gradient(@lightGreen, @lightGreen, @darkGreen);
		.box-shadow(1px, 1px, 3px, .5);
		.rounded-corners(.2em);
		border:1px solid #fff;
	}
}

/* ASIDES */
aside {
	text-align:left;
	
	nav {
		font-size:1.1em;
		margin-bottom:15px;

		a {
			display:block;
			padding:.1em .7em;
		}

		a.active {
			border-bottom:1px dotted @lightBlue;
		}
	}
}
aside.fixed {
	position: fixed;
	top:0;
}

/* CONTENT */
#content {
	
}

.users {
	ul {
		list-style:none;
		li {
			margin: 10px 0;
			padding:2px;
			background: #fff;
			.rounded-corners(3px);
			.box-shadow(1px, 1px, 2px, .4);
			img {
				margin-right:10px;
			}
		}
	}
}

ul.gallery {
	li {
		list-style:none;
		background:#fff;
		margin-top:20px;
		.box-shadow(2px, 2px, 4px, .4);
		.rounded-corners(5px);
		height:140px;
		text-align:center;
		
		a {
			font-size:1.5em;
			display:block;
			padding:10px;
			vertical-align:middle;
			line-height:110px;
		}
	}
}

div#slide_container {
	.rounded-corners(5px);
	.box-shadow(2px, 2px, 4px, .4);
	
	.slider {
		height: 360px;
		margin:10px;
	}
}

/* FOOTER */
footer {
	width:100%;
	padding:0;
	margin-top:25px;
	
	color:#eee;
	background:@footerBG;
	border-top:1px solid #fff;
	
	.inner {
		margin-top:10px;
	}
	
	ul { list-style:none; }
	
	h5 {
		color:#fff;
		text-align:center;
		margin:0;
	}
}